<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<div class="container mx-auto p-4">
    <h2 class="text-2xl font-bold mb-2">轮播图管理</h2>
    <div class="overflow-y-auto max-h-[500px]"> <!-- 设置了一个固定的最大高度和垂直滚动 -->
        <table class="w-full border-collapse">
            <thead>
            <tr>
                <th class="border p-2">预览</th>
                <th class="border p-2">轮播图名称</th>
                <th class="border p-2">操作</th>
            </tr>
            </thead>
            <tbody>
            <%--            <%--%>
            <%--                List<CarouselImage> carouselImages = new CarouselImageServiceImpl().listAllImages();--%>
            <%--                if (carouselImages != null && !carouselImages.isEmpty()) {--%>
            <%--                    for (CarouselImage image : carouselImages) {--%>
            <%--            %>--%>
            <%--            <tr>--%>
            <%--                <td class="border p-2"><img--%>
            <%--                        src="<%=image.getImageUrl()%>"--%>
            <%--                        alt="<%=image.getImageName() %>" class="w-24 h-auto"></td>--%>
            <%--                <td class="border p-2"><%=image.getImageName() %>--%>
            <%--                </td>--%>
            <%--                <td class="border p-2">--%>
            <%--                    <form action="<%=request.getContextPath()%>/carousel/delete/<%=image.getRandomId() %>"--%>
            <%--                          method="post">--%>
            <%--                        <button type="submit" class="text-red-500 hover:underline">删除</button>--%>
            <%--                    </form>--%>
            <%--                </td>--%>
            <%--            </tr>--%>
            <%--            <%--%>
            <%--                    }--%>
            <%--                }--%>
            <%--            %>--%>
            </tbody>
        </table>
    </div>

    <form id="uploadForm" action="<%=request.getContextPath()%>/carousel/upload" method="post"
          enctype="multipart/form-data" class="mt-6">

        <label class="w-full justify-between">
            <input type="file" name="carouselImage" id="carouselImage" class="border p-2 w-full mb-4"
                   accept=".jpg, .jpeg, .png">
            <input type="text" name="imageName" placeholder="请输入图片名称" class="mb-4 border p-2"/>
            <button type="submit" class="rounded-md bg-blue-500 px-4 py-2 text-white">上传轮播图</button>
        </label>
    </form>
</div>
